<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lexur-music</title>
    <link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/index.css">
    <link rel="stylesheet" href="../static/css/index2.css">
    <script src="../static/js/jquery-3.6.0.min.js"></script>
    <script src="../static/js/jquery.validate.min.js"></script>
    <script src="../static/bootstrap/js/bootstrap.min.js"></script>
    <script src="../static/js/utils.js"></script>
    <script src="../static/js/index.js"></script>
</head>

<body>
<div class="container" id="app">

    <!-- 标题 -->
    <div class="row">
        <a href="/music_platform/pages/index.html" class="col-md-3 h1">music</a>
    </div>

    <!-- 切换控制台 -->
    <div class="row">
        <div class="col-md-1 col-md-offset-11"><a onclick="show_register_modal()">注册</a></div>
    </div>

    <!-- 登录 -->
    <div class="row">
        <div class="col-md-4 col-md-offset-4" id="main">
            <h1 class="center">登录</h1>
            <form id="login" action="#" method="post">
                <div class="form-group">
                    <label>账号</label>
                    <input type="email" class="form-control" v-model="user.email" id="InputEmail1" placeholder="Email" name="mail">
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <input type="password" class="form-control" v-model="user.password" id="InputPassword" placeholder="Password"
                           name="password">
                </div>
                <div class="verify">
                    <input type="text" v-model="user.code" placeholder="请输入验证码" autocomplete="off">
                    <span><img id="img" src="/music_platform/check/check_code" alt="" onclick="changeCheckCode()"></span>
                </div>
                <div class="register">
                    <span style="margin-left: 200px"></span>
                </div>
                <button type="button" @click="login" class="btn btn-success btn-lg btn-block">登录</button>
            </form>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div class="modal fade" id="registerModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">注册</h4>
                </div>
                <div class="modal-body">

                    <form>
                        <div class="form-group">
                            <label>邮箱</label>
                            <input type="email" @blur="registerMail" v-model="registerUsers.email" class="form-control" id="registerMailForm" placeholder="Email">
                        </div>
                        <div class="form-group">
                            <label>昵称</label>
                            <input type="text" @blur="checkUsername"  v-model="registerUsers.username" class="form-control" id="registerNicknameForm" placeholder="仅包含字母数字下划线，且3-16位">
                        </div>
                        <div class="form-group">
                            <label>密码</label>
                            <input type="password" @blur="checkPassword" v-model="registerUsers.password" class="form-control" id="registerPasswordForm"
                                   placeholder="密码至少6位">
                        </div>
                        <div class="form-group gender">
                            <label>性别</label>
                            <input type="radio" v-model="registerUsers.sex" value="男" name="sex">男
                            <input type="radio" v-model="registerUsers.sex" value="女" name="sex">女
                        </div>
                        <div class="form-group">
                            <label>生日</label>
                            <input type="date" @blur="checkPassword" v-model="registerUsers.birthday" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>验证码·</label>
                            <input type="text" v-model="registerUsers.code" class="form-control" id="registerPhoneForm" placeholder="验证码">

                            <br/><input v-show="btnEnable" style="width: 105px;height: 30px" type="button" class="btn btn-sm" @click="sendMail" value="发送邮箱验证码">
                            <span v-show="btnEnable===false">验证码还有</span>
                            <input v-show="btnEnable===false" type="button" class="btn btn-sm" v-model="time">
                            <span v-show="btnEnable===false">秒过期</span>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" @click="register" class="btn btn-success" id="registerBtn">注册</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

</div>
<script src="../static/js/vue.js"></script>
<script src="../static/js/axios.min.js"></script>
<script src="../static/js/getParameter.js"></script>
<script>
    $(function(){
        $("#login").validate({
            rules:{
                email:{
                    required:true,
                    email:true
                },
                password:{
                    required:true,
                },
                code:{
                    required:true
                }
            },
            errorPlacement: function(error, element) { //错误提示的位置设置函数
                element.css("border-color", "red"); //改变边框颜色为红色
            },
            success: function(label, element) { //验证成功后的执行的回调函数
                $(element).css("border-color", "green"); //改变边框颜色为绿色
            }
        });
    })
     function changeCheckCode(){
        $("#img").prop("src","/music_platform/check/check_code?" + new Date().getTime());
    }
    const app = new Vue({
        el:"#app",
        data:{
            user:{},
            registerUsers:{},
            errorMsg:"",
            registerErrorMsg:"",
            isCodeRight:false,
            isEmailRight:false,
            isEmailCodeRight:false,
            isUsernameRight:false,
            isPasswordRight:false,
            btnEnable:true,
            time:59
        },
        methods:{
            async login(){
                if (!$("#login").valid()){
                    this.errorMsg = "请完善信息";
                    changeCheckCode();
                    alertInfo(this.errorMsg);
                }else {
                    this.isCodeRight = false;
                    let _this = this;
                    await axios.get("/music_platform/check/verify_code?code="+_this.user.code).then(function (response) {
                        if (response.data.flag){
                            _this.isCodeRight = true;
                        }else {
                            _this.errorMsg = response.data.errorMsg;
                            alertInfo(_this.errorMsg);
                            _this.isCodeRight = false;
                            changeCheckCode();
                        }
                    });
                    if (!this.isCodeRight){
                        return;
                    }else {
                        await axios.post("/music_platform/user/login",_this.user).then(function (response) {
                            if (response.data.flag){
                                    location.href = "/music_platform/pages/index.html";
                            }else {
                                _this.errorMsg = response.data.errorMsg;
                                alertInfo(_this.errorMsg);
                                changeCheckCode();
                            }
                        })
                    }
                }
            },
            async registerMail(){
                let _this = this;
                if (checkMail(_this.registerUsers.email)){
                    await axios.get("/music_platform/check/verify_email?email="+_this.registerUsers.email).then(function (response) {
                        if (!response.data.flag){
                            _this.registerErrorMsg = response.data.errorMsg;
                            alertInfo(response.data.errorMsg);
                            _this.isEmailRight = false;
                        }else {
                            _this.isEmailRight = true;
                        }
                    })
                }else {
                    alertInfo("邮箱格式错误");
                }
            },
            async register(){
                if (!this.isUsernameRight){
                    alertInfo("名称不合法")
                }else if (!this.isPasswordRight){
                    alertInfo("密码至少6位")
                }else {
                    let _this = this;
                    if (!this.isEmailRight){
                        alertInfo(_this.registerErrorMsg)
                        return;
                    }else {
                        await axios.get("/music_platform/check/verify_registerCode?code="+_this.registerUsers.code).then(function (response) {
                            if (response.data.flag){
                                _this.isEmailCodeRight = true;
                            }else {
                                _this.isEmailCodeRight = false;
                                _this.registerErrorMsg = response.data.errorMsg;
                                alertInfo(response.data.errorMsg);
                            }
                        })
                        if (_this.isEmailCodeRight){
                            await axios.post("/music_platform/user/register",_this.registerUsers).then(function (response) {
                                if (response.data.flag){
                                    location.href = "/music_platform/pages/login.html";
                                }else {
                                    _this.registerErrorMsg = response.data.errorMsg;
                                    alertInfo(response.data.errorMsg);
                                }
                            })
                        }else {
                            alertInfo(_this.registerErrorMsg);
                        }
                    }
                }

            },
            checkUsername(){
                if (this.registerUsers.username!==undefined && chekUsername(this.registerUsers.username)){
                    this.isUsernameRight = true;
                }else {
                    alertInfo("名称不合法");
                    this.isUsernameRight = false;
                }
            },
            async checkPassword(){
                if (this.registerUsers.password!==undefined && checkPasswords(this.registerUsers.password)){
                    this.isPasswordRight = true;
                }else {
                    alertInfo("密码至少6位");
                    this.isPasswordRight = false;
                }
            },
            async setTimes(){
                let _this = this;
                _this.btnEnable = false;
                var id = setInterval(function () {
                    _this.time = _this.time - 1;
                },1000);
                setTimeout(function () {
                    _this.btnEnable = true;
                    clearInterval(id);
                    _this.time = 59;
                },60000);
            },
            async sendMail(){
                if(this.isEmailRight){
                    let _this = this;
                    await axios.get("/music_platform/check/sendEmail?email="+_this.registerUsers.email).then(function (response) {
                        if (response.data.flag){
                            _this.setTimes();
                            alertInfo("发送成功")

                        }else {
                            alertInfo("发送失败")
                        }
                    });
                }else {
                    alertInfo("邮箱不合法")
                }
            }
        },
    })
</script>
</body>

</html>